<div class="pd14 vany_authority">
	<link rel="stylesheet" href="templates/authority/zzgl/css/authority.css" />
	<link rel="stylesheet" href="templates/authority/wbry/css/external.css" />
	<link rel="stylesheet" href="templates/authority/common/css/zTreeStyle.css" />
	<link rel="stylesheet" href="templates/authority/common/css/cropper.css" />
	<div class="vany_treeTable pd14" id="authority">
		<!--面包屑-->
		<div class="pb10" id="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">组织权限</el-breadcrumb-item>
				<el-breadcrumb-item>外部人员</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div id="treeTable" class="treeTable">
			<!--树-->
			<div class="item i1 vany_tree" id="move_left">
				<div class="relative">
					<div class="pd14">
						<div class="search-bar">
							<input type="text" id="key" value="" class="empty" placeholder="请输入关键字搜索" />
							<i class="el-input__icon el-icon-search"></i>
						</div>
					</div>
					<div class="treeTitle" id="treeTitle">
						<i class="iconfont">&#xe798;</i>外部人员分类
						<div class="floatR"><i class="iconfont icon-jia addRole" @click="titleOperation"></i></div>
						<div class="chooseShow" id="titleOperation">
							<ul>
								<li authority="base_customer_addRootTag">
									<el-button type="text" @click="addTitle">添加外部人员分类</el-button>
								</li>
							</ul>
						</div>
					</div>
					<ul id="treeDemo" class="ztree"></ul>
					<div class="moveline"></div>
				</div>
			</div>
			<!--表格-->
			<div class="item i2" id="table">
				<div class="pd14">
					<el-row :gutter="8">
						<el-col :span="12">
							<el-row :gutter="8">
								<el-col :span="12">
									<el-input v-model="searchValue" @change="restoreTableData" @keyup.enter.native="searchTable" :on-icon-click="searchTable" placeholder="请输入您要搜索的内容" icon="search">
									</el-input>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="12">
							<el-row type="flex" class="row-bg qxBtn" justify="end">
								<el-button type="primary" @click="openNewPerson" authority="base_customer_add">新增人员</el-button>
								<el-button type="primary" @click="BatchImport()" authority="base_customer_import">批量导入</el-button>
								<el-button type="primary" @click="Batchexport" authority="base_customerUser_export">批量导出</el-button>
							</el-row>
						</el-col>
					</el-row>
				</div>

				<el-table ref="table" :data="tableData" v-loading="listLoading" @selection-change="selsChange" highlight-current-row style="width: 100%;" :height="tableHeight" @row-click="showPersonCard">
					<el-table-column type="selection"> </el-table-column>
					<el-table-column prop="userAccount" show-overflow-tooltip label="账号">
					</el-table-column>
					<el-table-column prop="userName" show-overflow-tooltip label="姓名" width="120">
						<template scope="scope">
							<img :src="scope.row.photoUrl" onerror="nofindImg(this);" /> {{ scope.row.userName }}
						</template>
					</el-table-column>
					<el-table-column prop="genderStr" label="性别" width="80">
					</el-table-column>
					<el-table-column prop="dept" show-overflow-tooltip label="单位名称" width="240">
					</el-table-column>
					<el-table-column prop="mobile" show-overflow-tooltip label="手机号">
					</el-table-column>
					<el-table-column prop="email" show-overflow-tooltip label="邮箱">
					</el-table-column>
					<!-- <el-table-column column-key="status" prop="State" show-overflow-tooltip label="状态" :filters="filters" :filter-multiple="false" :filter-method="filterTag" filter-placement="bottom-end"> -->
					<el-table-column column-key="status" prop="State" show-overflow-tooltip label="状态">
						<template scope="scope">
							<div v-if="scope.row.status === '1'">
								启用
							</div>
							<div v-else>
								<div style="color:#ff0000;">禁用</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--批量选择-->
			<div id="multiSelectPerson" v-bind:class="{isIE: isIE}">
				<el-dialog top="top" ref="dialog" :modal="false" v-model="multiSelectPersonVisible" size="tiny" custom-class="right_dialog title_dialog" @close="removeFromSeleted">
					<span slot="title" class="el-dialog__title" v-text="title"></span>
					<div class="seleted_persons">
						<div class="seleted_person" v-for="(seletedPerson, rowindex) in seletedPersons">
							<img :src="seletedPerson.photoUrl" width="60" height="60" onerror="nofindImg(this);" />
							<p v-text="seletedPerson.userName"></p>
							<span class="remove_from_seleted" @click="removeFromSeleted(rowindex)">╳</span>
						</div>
					</div>
					<span slot="footer" class="dialog-footer qxBtn">
    					<!-- <el-button @click="moveSeletedPerson">移动</el-button> -->
    					<el-button @click="deleteSeletedPerson" authority="base_customer_delCustomer">删除</el-button>
  					</span>
				</el-dialog>
			</div>
			<!--树的下拉-->
			<div id="rMenu" class="chooseShow">
				<ul>
					<li id="m_add" authority="base_customer_addTag">
						<el-button type="text" @click="add">添加子分类</el-button>
					</li>
					<li id="m_edit" authority="base_customer_modifyTag">
						<el-button type="text" @click="Edit">修改</el-button>
					</li>
					<li id="m_del" authority="base_customer_deleteTag">
						<el-button type="text" @click="del">删除</el-button>
					</li>
				</ul>
			</div>
			<!--添加子部门-->
			<div id="addRole">
				<el-dialog v-model="treeAddVisible" title="添加外部人员分类名称" size="small" :close-on-click-modal="false" custom-class="border_dialog title_dialog">
					<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
						<el-form-item label="分类名称" prop="tagName">
							<el-input v-model="ruleForm.tagName" placeholder="请输入分类名称"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					</div>
				</el-dialog>
			</div>
			<!--树修改-->
			<div id="treeEdit">
				<el-dialog v-model="treeEditVisible" title="修改外部人员分类名称" size="small" :close-on-click-modal="false" custom-class="border_dialog title_dialog">
					<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
						<el-form-item label="分类名称" prop="tagName">
							<el-input v-model="ruleForm.tagName" placeholder="请输入分类名称"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
	<!--批量导入-->
	<div id="BatchImport" class="BatchImport">
		<el-dialog :close-on-click-modal="false" :auto-upload="false" v-model="batchImportVisible" title="批量导入" size="small" custom-class="border_dialog title_dialog ImportExcel">
			<el-form :label-position="labelPosition" :model="ruleForm" ref="ruleForm">
				<el-form-item label="">
					<div class="vanyfilter hastag" v-if="ruleForm.orgList" @click="openOrgFilter">
						<el-tag v-for="tag in orgList" :key="tag.id">{{tag.name}}</el-tag>
					</div>
					<div class="vanyfilter" v-else @click="openOrgFilter">
						请选择要导入到的分类
					</div>
					<el-input v-model="ruleForm.batch" hidden></el-input>
					<div class="sub-title">请按照我们提供的标准模板填写信息
						<a href="/templates/excelTemplate/customerInportTemplate.xlsx">下载标准模板</a>
					</div>
				</el-form-item>
				<el-upload ref="upload" :show-file-list="false" :auto-upload="false" drag :on-change="handleChange" :on-success="handleSuccess" action="/base/customer/import" :data="form">
					<div class="user_import" v-if="filename">
						<i class="excel iconfont icon-excel"></i>
						<div class="el-upload__text" v-text="filename"></div>
					</div>
					<div class="user_import" v-else>
						<i class="iconfont icon-jia"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</div>
					<div class="el-upload__tip" slot="tip">支持Excel格式</div>
				</el-upload>
				<el-form-item>
					<el-radio-group v-model="ruleForm.state">
						<el-radio :label="1">成员信息相同时，覆盖原有信息</el-radio>
						<el-radio :label="0">成员信息相同时，忽略原有信息</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
				<el-button class="el-button--ddd" @click="batchImportVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
	<!--新增人员-->
	<div id="newPerson">
		<el-dialog :title="title" v-model="newPersonVisible" size="small" :close-on-click-modal="false" custom-class="center_dialog title_dialog" @close="close">
			<el-form ref="newPersonForm" :rules="rules" :model="form" :label-position="labelPosition" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="姓名" prop="userName" required>
							<el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="头像">
							<el-upload :auto-upload="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="avatar-uploader" action="" :show-file-list="false" :on-change="handleChange">
								<img :src="photoUrl" class="avatar" id="avater_preview" onerror="nofindImg(this);">
								<p>修改头像</p>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="账号" prop="userAccount" required>
							<el-input :disabled="!isAdd" v-model="form.userAccount" placeholder="请输入账号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="手机号" prop="mobile">
							<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="gender">
							<el-radio-group v-model="form.gender">
								<el-radio label="1">男</el-radio>
								<el-radio label="0">女</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="QQ" prop="qq">
							<el-input v-model="form.qq" placeholder="请输入QQ号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
							<el-radio-group v-model="form.status">
								<el-radio label="1">启用</el-radio>
								<el-radio label="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="form.email" placeholder="请输入邮箱号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="单位名称" prop="company">
							<el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="所属分类" prop="tags" required>
							<div class="vanyfilter hastag" v-if="form.tags" @click="openTagFilter">
								<el-tag class="vany-tag fenlei-tag" v-for="tag in tags" :key="tag.id">
									<i class="icon iconfont tag-icon icon-fenlei"></i>
									<span v-text="tag.name" class="tag-name"></span>
								</el-tag>
							</div>
							<div class="vanyfilter" v-else @click="openTagFilter">
								请选择所属分类
							</div>
							<el-input v-model="form.tags" hidden></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
  					<el-button v-if="isAdd" @click="save('add')">保存并继续添加</el-button>
  					<el-button @click="save()" type="primary">保存</el-button>
					</span>
		</el-dialog>
	</div>
	<!--头像裁剪框-->
	<div id="avaterCropper">
		<el-dialog title="裁剪头像" :visible="dialogVisible" :close-on-click-modal="false" custom-class="border_dialog title_dialog" size="tiny">
			<div>
				<img id="avater_be_cropper" :src="imgSrc" style="max-width: 100%;">
			</div>
			<span slot="footer" class="dialog-footer">
		    	<el-button type="primary" @click="updateAvater(true)">确 定</el-button>
		    	<el-button @click="updateAvater(false)">取 消</el-button>
		  	</span>
		</el-dialog>
	</div>
</div>
<script type="text/javascript" src="templates/authority/common/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="templates/authority/common/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript" src="templates/authority/common/js/VanyBaseTree.js?ts=new Date().getTime()"></script>
<script type="text/javascript" src="templates/authority/common/js/VanyEditTree.js?ts=new Date().getTime()"></script>
<script type="text/javascript" src="templates/authority/common/js/cropper.js"></script>
<script type="text/javascript" src="templates/authority/wbry/js/external.js?ts=new Date().getTime()"></script>
<script type="text/javascript" src="templates/authority/common/js/moveline.js"></script>